<ion-view left-buttons="leftButtons">
  <ion-nav-title>
    <span class="visible-xs visible-sm">{{::formData.name||formData.uid||(formData.pubkey|formatPubkey)}}</span>
    <span class="hidden-xs hidden-sm"
          ng-if="!loading">
      <ng-if ng-if="formData.name || formData.uid">{{'WOT.OPERATIONS.TITLE'|translate: {uid: formData.name || formData.uid} }}</ng-if>
      <ng-if ng-if="!formData.name && !formData.uid"><i class="ion-key"></i> {{formData.pubkey|formatPubkey}} {{'WOT.OPERATIONS.TITLE'|translate}}</ng-if>
    </span>
  </ion-nav-title>

  <ion-content scroll="true">

    <ion-refresher pulling-text="{{'COMMON.BTN_REFRESH' | translate}}"
                   on-refresh="doUpdate(true)">
    </ion-refresher>

    <div class="hidden-xs hidden-sm padding text-center">

      <button class="button button-stable button-small-padding icon ion-loop ink"
              ng-click="doUpdate()"
              title="{{'COMMON.BTN_REFRESH' | translate}}">
      </button>

      <button class="button button-stable button-small-padding icon ion-android-download ink"
              ng-click="downloadHistoryFile()"
              title="{{'COMMON.BTN_DOWNLOAD_ACCOUNT_STATEMENT' | translate}}">
      </button>

      <cs-extension-point name="buttons"></cs-extension-point>

    </div>

    <div class="center padding" ng-if="loading">
      <ion-spinner icon="android"></ion-spinner>
    </div>

    <div class="list {{motion.ionListClass}}" ng-if="!loading">

      <div class="row">

        <div class="col col-15 hidden-xs hidden-sm">&nbsp;</div>

        <div class="col">

          <!-- the balance -->
          <div class="item item-tx item-divider">
            {{:locale:'ACCOUNT.BALANCE_ACCOUNT'|translate}}
            <div class="badge item-note"
                 ng-class=":balance:{'badge-assertive': formData.balance <= 0, 'badge-balanced': formData.balance > 0 }"
                 ng-bind-html=":balance:formData.balance|formatAmount:{currency: $root.currency.name}">
            </div>
            <div class="badge badge-secondary" ng-if="$root.settings.expertMode">
              (<span ng-bind-html=":balance:formData.balance| formatAmount: {useRelative: !$root.settings.useRelative, currency: $root.currency.name} "></span>)
            </div>
          </div>

          <!-- Errors transactions-->
          <div class="item item-icon-left " ng-if="formData.tx.errors.length">
            <i class="icon ion-alert-circled"></i>
            {{:locale:'ACCOUNT.ERROR_TX'|translate}}
            <div class="badge badge-assertive">
              {{formData.tx.errors.length}}
            </div>
          </div>

          <!-- Pending transactions -->
          <ng-if ng-if="formData.tx.pendings.length">
            <span class="item item-pending item-divider" >
              <i class="ion-clock"></i>
              {{:locale:'ACCOUNT.PENDING_TX'|translate}}
            </span>

            <div class="item item-pending item-tx item-icon-left"
                 ng-repeat="tx in formData.tx.pendings"
                 ng-init="pending=true;"
                 ng-include="::'templates/wallet/item_tx.html'">
            </div>
          </ng-if>

          <!-- Validating transactions -->
          <ng-if ng-if="formData.tx.validating.length">
            <span class="item item-pending item-divider">
              {{:locale:'ACCOUNT.VALIDATING_TX'|translate}}
            </span>

            <div class="item item-pending item-tx item-icon-left"
                 ng-repeat="tx in formData.tx.validating"
                 ng-init="validating=true;"
                 ng-include="::'templates/wallet/item_tx.html'">
            </div>
          </ng-if>

          <span class="item item-divider" ng-if="!loading">
            {{:locale:'ACCOUNT.LAST_TX'|translate}}
            <a id="helptip-wallet-tx" style="position: relative; bottom: 0; right: 0px;">&nbsp;</a>
          </span>

          <!-- iterate on each TX -->
          <div ng-repeat="tx in formData.tx.history"
               class="item item-tx item-icon-left"
               ng-include="::!tx.isUD ? 'templates/wallet/item_tx.html' : 'templates/wallet/item_ud.html'">
          </div>

          <div class="item item-text-wrap text-center" ng-if="formData.tx.fromTime > 0">
            <p>
              <a ng-click="showMoreTx()">{{:locale:'ACCOUNT.SHOW_MORE_TX'|translate}}</a>
              <span class="gray" translate="ACCOUNT.TX_FROM_DATE" translate-values="{fromTime: formData.tx.fromTime}"></span>
              <span class="gray">|</span>
              <a ng-click="showMoreTx(-1)" translate>ACCOUNT.SHOW_ALL_TX</a>
            </p>
          </div>
        </div>

        <div class="col col-15 hidden-xs hidden-sm">&nbsp;</div>

      </div>
    </div>
  </ion-content>
</ion-view>
